<template>
    <div>
        <!-- 顶部导航 -->
        <van-nav-bar title="我的地址" left-text="" left-arrow @click-left="$router.back()" />
        <div class="my_add">我的地址</div>

        <van-cell v-for="item in list.reverse()" title-style="min-width:320px">

            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
                <span class="custom-title">{{ item.address }} {{ item.addressDetail }}</span>
            </template>

            <template #label>
                <van-tag plain type="primary">{{ item.Labelress }}</van-tag>
                <span>{{ item.tel }}</span>
                <span>{{ item.name }}</span>
            </template>
            <template #value>
                <van-icon name="records" @click="deladdress(item.addressId)" />
            </template>

        </van-cell>



        <!-- 新增地址 -->
        <div class="addAddress"><van-button type="primary" @click="toaddressList" block>+添加地址</van-button></div>

        <!-- 弹出层的样式 -->
        <van-popup v-model:show="show" position="bottom" :style="{ height: '100%' }">

            <van-form @submit="onSubmit">
                <!-- 输入任意文本 -->
                <van-cell-group>
                    <!-- 联系人-->
                    <van-field v-model="modeForm.name" name="name" label="联系人" placeholder="用于取餐时对你的称呼"
                        :rules="namerules" />
                    <!-- 性别 -->
                    <van-field name="sex" label="性别">
                        <template #input>
                            <van-radio-group v-model="modeForm.sex" direction="horizontal">
                                <van-radio name="男">先生</van-radio>
                                <van-radio name="女">女士</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <!-- 输入手机号，调起手机号键盘 -->

                    <van-field v-model="modeForm.tel" type="tel" label="手机号码" placeholder="138138905" name="tel"
                        :rules="telrules" />

                    <!-- 只读可点击的表格 -->
                    <van-field name="area" v-model="modeForm.address" :value="address" label="地址" placeholder="请选择地址" />


                    <!-- 输入任意文本 -->
                    <van-field v-model="modeForm.addressDetail" name="addressDetail" label="门牌号" placeholder="例:5号楼203室"
                        :rules="[{ required: true, message: '请填写详细信息' }]" />
                    <!-- 标签 -->
                    <van-cell title="标签" title-style="max-width:100px">
                        <div class="Labelress">
                            <van-button plain round v-for="(item, index) in addrList"
                                :class="{ 'btn_active': flag === index }" @click="clickCpn(item, index)">{{ item
                                }}</van-button>

                        </div>

                    </van-cell>
                    <!-- 设为默认地址 -->
                    <div class="default-address">
                        <input type="checkbox" v-model="modeForm.isDefault" name="isDefault"
                            @click="isDefault = !isDefault" :checked="modeForm.isDefault"/>选择默认地址
                    </div>
                </van-cell-group>
                <div class="del-address">
                    <van-button type="danger" round @click="dellist">删除</van-button>
                    <van-button type="primary" round native-type="submit">保存</van-button>
                </div>
            </van-form>
        </van-popup>
        <div class="loaded">已加载全部地址</div>
    </div>
</template>

<script setup>
import { useProvide } from '@/hooks/useprovide';
import { ref, reactive } from 'vue'
import { useAddress } from '@/hooks/useaddress'
import { delAddress, editAddress } from '@/api/api'
import { showToast, showConfirmDialog } from 'vant';



const { addrList, clickCpn, namerules, telrules, flag } = useAddress()



const { list, toaddressList, Rendeaddress } = useProvide()

const show = ref(false)
// 修改逻辑
const ids = ref()
const modeForm = ref({})
const deladdress = (id) => {
    ids.value = id
    console.log(id);
    
    list.value.forEach(item => {
        
        console.log(item.addressId,item.isDefault);
        if (item.addressId == id) {
            modeForm.value = {
                name: item.name,
                sex: item.sex,
                tel: item.tel,
                address: item.address,
                Labelress: item.Labelress,
                isDefault: item.isDefault,
                addressDetail: item.addressDetail,
                addressId: item.addressId
            }


        }
    })
    show.value = true

}


//修改地址
const onSubmit = async () => {
    // console.log(modeForm.value);
    console.log(modeForm.value.isDefault);
    if(modeForm.value.isDefault){
        modeForm.value.isDefault = 1
    }else{
        modeForm.value.isDefault = 0
    }
    console.log(modeForm.value.isDefault);
    
    const res = await editAddress(modeForm.value)
    console.log(res)
    showToast('修改成功');
    show.value = false
    // // 重新渲染一遍
    Rendeaddress()
}

//删除逻辑
const dellist = async () => {
    showConfirmDialog({
        title: '删除按钮',
        message:
            '你取定要删除嘛？',
    }).then(async () => {
        const res = await delAddress({ addressId: ids.value })
        // // 重新渲染一遍
        Rendeaddress()
    }).catch(() => {

    });
    show.value = false
    // 重新渲染一遍
    Rendeaddress()
}

</script>

<style lang="scss" scoped>
.my_add {
    font-size: 13px;
    color: #a6a6a6;
    margin: 5px;

}

.van-cell {
    --van-cell-height: 64px;
    --van-cell-group-title-font-size: 15px;
    margin-bottom: 10px;

    span {
        margin: 0 5px;
        font-size: 14px;
    }

    .van-icon {
        margin-top: 20px;
    }

    .van-tag {
        font-size: 10px;
        height: 18px;
    }
}

//到达一定的长度变成省略号
.custom-title {
    display: inline-block;
    width: 250px;
    margin-right: 4px;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.addAddress {
    width: 375px;
    position: fixed;
    height: 60px;
    bottom: 0;
    background-color: #fff;
    position: fixed;
    bottom: 0;

    .van-button {
        width: 345px;
        height: 40px;
        margin: 10px 15px;
        background-color: #88afd5;
        border: none;
        color: #fff;
        font-size: 16px;
        font-weight: 900;
    }

}

.default-address {
    font-size: 12px;
    margin-top: 10px;
}

.Labelress {
    text-align: left;

    .van-button {
        width: 62px;
        height: 28px;
        color: #999;
        margin-right: 10px;
    }

    .btn_active {
        border: #88afd5 1px solid;
    }

}

.del-address {
    .van-button {
        width: 150px;
        height: 40px;
        margin: 10px 15px;

        border: none;
        color: #fff;
        font-size: 16px;
        font-weight: 900;
    }
}

.loaded {
    width: 120px;
    height: 22px;
    margin: 0 auto;
    color: rgba(166, 166, 166, 1);
    font-size: 15px;
    line-height: 150%;
    // text-align:center;
}
</style>